<template>
	<view class="card-view">
		<view class="up" v-if="goodsDetail">
			<image :src="goodsDetail.morebagPublishPictures[0].picture" mode="aspectFit"></image>
			<view class="goods-name">
				{{goodsDetail.commodity}}
			</view>
			<view class="goods-price">
				$ {{price}}
			</view>
		</view>
		
		<view class="down">
			<view class="ipt">
				<view class="title">
					{{$t("card.email")}}
				</view>
				<input v-model="parmas.email" type="text" :placeholder="$t('card.plaEmail')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
			</view>
			<view class="ipt">
				<view class="title">
					{{$t("card.cardNum")}}
				</view>
				<input v-model="parmas.stripePayParam.number" type="text" :placeholder="$t('card.plaCardNum')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
			</view>
			<!-- <view class="ipt">
				<view class="title">
					{{$t("card.code")}}
				</view>
				<input type="text" :placeholder="$t('card.plaCode')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
			</view> -->
			
			<view class="expire">
				<view class="expire-time">
					<view class="expire-time-desc">
						{{$t("card.time")}}
					</view>
					
					<input v-model="yearMonth" type="text" :placeholder="$t('card.plaTime')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
				</view>
				
				<view class="expire-cvc">
					<view class="expire-time-desc">
						{{$t("card.cvc")}}
					</view>
					
					<input type="text" style="border: 2repx solid rgba(128, 128, 128, 0.1);" :disabled="true" :placeholder="$t('card.plaCvc')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
				</view>
			</view>
			
			<!-- <view class="ipt">
				<view class="title">
					{{$t("card.currency")}}
				</view>
				<view class="select-con" @tap="show=true">
					{{selName}}
				</view>
				<u-picker :show="show" :columns="country" @confirm="confirm" @cancel="show=false" @close="show=false" closeOnClickOverlay></u-picker>
			</view> -->
		</view>
		
		
		<view class="pay-btn" @tap="pay">
			{{$t("selectPay.payBtn")}}
		</view>
	</view>
</template>

<script>
	import { payCard,getCommDetail } from "@/common/api.js"
	
	export default {
		data() {
			return {
				show: false,
				selName: this.$t("card.hint"),
				country: [
					["AUD", "CAD", "EUD", "EUR", "GBP", "HKD"
					, "JPY", "MYR", "NZD", "SGD", "USD"]
				],
				goodsDetail: null,
				price: null,
				parmas: {
					stripePayParam: {
						number: "",
						expMonth: "",
						expYear: "",
					},
					email: "",
					orderId: "",
				},
				yearMonth: "",
				orderId: null,
				selectOrder: null
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.selName = e.value[0];
				this.show = false;
			},
			async pay() {
				if(!this.yearMonth) {
					return
				}
				this.parmas.stripePayParam.expMonth = this.yearMonth.split("/")[0];
				this.parmas.stripePayParam.expYear = this.yearMonth.split("/")[1];
				for (let key in this.parmas) {
					if(!this.parmas[key]) {
						uni.showToast({
							icon: 'none',
							title: this.$t('card.hint'),
							duration: 1200,
							mask: true
						})
						return
					}
				}
				const res = await payCard(this.parmas);
				if(res) {
					if(res.code == 500) {
						uni.showToast({
							icon: 'none',
							title: this.$t('card.no'),
							duration: 1200,
							mask: true
						})
						
						return
					}
					uni.showToast({
						icon: 'none',
						title: this.$t('card.success'),
						duration: 1200,
						mask: true
					})
					
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/paySuccess/paySuccess"
						})
					}, 1200)
				}
			},
			async initGoodsDeatils(id) {
				const res = await getCommDetail(id);
				this.goodsDetail = res.data;
			}
		},
		onLoad(option) {
			this.goodsDetail = JSON.parse(decodeURIComponent(option.item));
			// this.initGoodsDeatils(goodsDetail.id);
			this.price = option.price;
			this.parmas.orderId = option.orderId;
			this.selectOrder = option.selectOrder;
			// console.log(option);
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("card.title")});
		},
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	.card-view {
		padding: 40rpx;
	}
	
	.up {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		image {
			width: 400rpx;
			height: 300rpx;
		}
		
		.goods-name {
			font-weight: bold;
			font-size: 32rpx;
			margin-top: 20rpx;
		}
		
		.goods-price {
			font-weight: bold;
			font-size: 32rpx;
			margin-top: 20rpx;
		}
	}
	
	.down {
		margin-top: 100rpx;
		
		.ipt {
			margin-top: 40rpx;
			
			.title {
				font-size: 24rpx;
				margin-left: 10rpx;
			}
			
			input {
				background: #FFFFFF;
				border: 2repx solid rgba(128, 128, 128, 0.1);
				border-radius: 10rpx;
				height: 80rpx;
				padding-left: 20rpx;
				margin-top: 20rpx;
			}
		}
	}
	
	.select-con {
		background: #FFFFFF;
		border: 2repx solid rgba(128, 128, 128, 0.1);
		border-radius: 10rpx;
		height: 80rpx;
		padding-left: 20rpx;
		margin-top: 20rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 24rpx;
	}
	
	.pay-btn {
		border-radius: 20rpx;
		background: #000000;
		height: 88rpx;
		color: #FFFFFF;
		text-shadow: 0rpx 8rpx 8rpx 0rpx #0000003F;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		line-height: 88rpx;
		text-align: center;
		margin-top: 40rpx;
	}
	
	.expire {
		margin-top: 40rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		
		.expire-time {
			width: 45%;
		}
		
		.expire-cvc {
			width: 45%;
		}
		
		input {
			background: #FFFFFF;
			border: 2repx solid rgba(128, 128, 128, 0.1);
			border-radius: 10rpx;
			height: 80rpx;
			padding-left: 20rpx;
			margin-top: 20rpx;
		}
	}
</style>